import React , {Component} from 'react';
import { Input ,Button ,Row,Col,notification} from 'antd';
import $ from 'jquery';
import ajax from 'utils/ajax';

class IdManage extends Component{
    constructor(){
        super();
        this.transform = this.transform.bind(this)
        this.array = [
            {
             button:"ID混淆",
             col:'混淆后的id:',
             input:"id_one",
             span:"one_id"
            },{
             button:"ID反混淆",
             col:'反混淆后的id:',
             input:"id_two",
             span:"two_id"
            }];
    }
    transform = (event,span)=>{
        const reg = /[A-Za-z]+$/g;
        if($(`#${event}`).val() == ""){
             notification.warn({
                message: '所对应的输入框没有填写',
                description: "请填写",
            });
        }else if(event === "id_one" && reg.test($(`#${event}`).val())){
            notification.error({
                message: '输入有误',
                description: "请填写数字",
            });
        }else{
            const url = event === "id_one" ? "/tool/encode":"/tool/decode";
            let param = "",value="";
            if(event === "id_one"){
                param = 'id';
                value = Number($(`#${event}`).val())
            }else{
                param = 's';
                value = $(`#${event}`).val()
            }
            ajax.post({
                url:url,
                params:`${param}=${value}`,
                success(res){
                    $(`#${span}`).html(res.data)
                }
            })
        }

        
           
       
    }

    render(){
        return(
            <div>
                {
                   this.array.map((item)=>{
                        return (
                        <Row style={{marginBottom:"20px"}}>
                            <Input style={{float:"left",width:"240px"}} id={item.input} ></Input><Button id='obscures' type='primary' style={{float:"left",marginLeft:"20px",width:"76px",height:"32px",color:"#fff",marginRight:"20px"}} onClick={()=>this.transform(item.input,item.span)}>{item.button}</Button><Col style={{height:"32px",lineHeight:"32px"}}>{item.col}<span id={item.span} style={{fontSize:"16px",color:"red",marginLeft:"10px"}}></span></Col>
                        </Row>
                        
                        )
                   })              
                }
                   
              
            </div>
        )
    }
}

export default IdManage;